<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <van-tabs>
      <van-tab title="验证码登录">
        <div class="img">
          <img src="../../img/logo.jpg" alt="">
        </div>
        <div class="inp">
          <p><span class="phone">+86</span><input type="text" placeholder="输入手机号" class="inp1" v-model="username"></p>
          <van-popup v-model:show="showPhone" class="place">手机号和验证码不能为空</van-popup>
          <p><input type="text" placeholder="输入验证码" class="inp2" v-model="code">
            <!-- <div class="btnyzm"> -->
          <div v-if="codeb == false">
            <button class="ifyzm" disabled>{{ codetime }}s后重新获取验证码</button>
          </div>
          <div v-else>
            <button class="elyzm" @click="btncode">获取验证码</button>
          </div>
          </p>
          <p class="nozh">没有账号？<span class="tologon" @click="tologon">去注册</span></p>
          <div v-if="username == '' || code == ''">
            <button class="btnlogin" @click="login">登录</button>
          </div>
          <div v-else>
            <button class="btnlogin2" @click="login">登录</button>
          </div>
          <p class="inpbtn">
            <van-checkbox v-model="inpbtn" @click="yes" class="checkbox">
              <span class="yi">
                已阅读并同意<span class="blue" @click="miao">《妙手医生服务协议》</span>
                和<span class="blue">《妙手医生隐私政策》、</span><span class="blue">《妙手医生儿童个人信息保护规则》</span>
              </span>
            </van-checkbox>
          </p>
        </div>
        <!-- 协议弹框 -->
        <van-popup v-model:show="show" class="pop">
          <p>为了更好地保障您的合法权益，请您阅读并同意<span class="blue"><router-link to="/agreement">《妙手医生服务协议》</router-link></span>和
            <span class="blue">《妙手医生隐私政策》、</span><span class="blue">《妙手医生儿童个人信息保护政策》</span>
          </p>
          <p>
            <button class="jj" @click="jjbtn">拒绝</button>
            <button class="ty" @click="tybtn">同意</button>
          </p>
        </van-popup>
        <!-- 验证码弹框 -->
        <van-popup v-model:show="showTop" position="top" class="popcode">
          <p>验证码：{{ codeyzm }}</p>
        </van-popup>
      </van-tab>
      <van-tab title="密码登录">
        <div class="img">
          <img src="../../img/logo.jpg" alt="">
        </div>
        <div class="tab2">
          <p><input type="text" placeholder="请输入手机号" class="Tphone" v-model="username"></p>
          <p><input type="text" placeholder="请输入密码" class="Tpwd" v-model="pwd"></p>
          <div v-if="username == '' || pwd == ''">
            <button class="Tbtnlogin" @click="Tlogin">登录</button>
          </div>
          <div v-else>
            <button class="Tbtnlogin2" @click="Tlogin">登录</button>
          </div>
          <p class="inpbtn">
            <van-checkbox v-model="inpbtn" @click="yes" class="checkbox">
              <span class="yi">
                已阅读并同意<span class="blue" @click="miao">《妙手医生服务协议》</span>
                和<span class="blue">《妙手医生隐私政策》、</span><span class="blue">《妙手医生儿童个人信息保护规则》</span>
              </span>
            </van-checkbox>
          </p>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 引导页 -->
    <van-popup v-model:show="showY" position="top" class="pup">
      <img src="../../img/OIP-C.jpg" alt="">
      <p><van-loading type="spinner" color="#1989fa" /></p>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import axios from 'axios';
import { showToast } from 'vant';

const router = useRouter()

// 手机号
const username = ref('')
// 密码
const pwd = ref('')
// 验证码
const code = ref('')

// 引导页
const showY = ref(false);

const miao=()=>{
  router.push('/agreement')
}
// 验证码倒计时
const codetime = ref(60);
// 验证码按钮状态
const codeb = ref(true)
//   axios.post('/api/login',{params:{username}}).then((res)=>{
//   console.log(res)
// })
// 点击去注册页
const tologon = () => {
  router.push('/logon')
}
// 弹框
const showPhone = ref(false)
// 登录
const login = async () => {
  // axios.post('/api/login', { username: username.value }).then((res) => {
  //   console.log(res.data)
  //   localStorage.setItem('token', res.data.token)
  //   localStorage.setItem('nickname', res.data.data.nickname)
  //   localStorage.setItem('avatars', res.data.data.avatars)
  //   localStorage.setItem('username', res.data.data.username)
  // })
  if (username.value == '') {
    showPhone.value = true
  } else {
    if (inpbtn.value == true) {
      // if (username.value) {
      if (codeyzm == code.value) {
        // localStorage.setItem('token',res.data.data.token)
        console.log(username.value, code.value)
        console.log('登录成功')
        axios.post('/api/login', { username: username.value }).then((res) => {
          console.log(res.data)
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('nickname', res.data.data.nickname)
          localStorage.setItem('avatars', res.data.data.avatars)
          localStorage.setItem('username', res.data.data.username)
        })
        router.push('/guide')
        // alert('登录成功')
        // showY.value = true
        // setTimeout(() => {
        //   // router.push('/setp')
        //   router.push('/home')
        // }, 1000)
      } else {
        // alert('验证码错误')
      }
    } else {
      show.value = true;
    }
  }

}
// 发送验证码
const codeyzm = Math.random().toString().slice(4, 8)
// 点击发送验证码按钮
const btncode = () => {
  if (username.value == '') {
    showToast('请输入手机号');
  } else {
    codeb.value = false
    const timer = setInterval(() => {
      codetime.value--;
      if (codetime.value === 0) {
        clearInterval(timer)
        codeb.value = true
        codetime.value = 60
      }
      // console.log(codetime.value)
    }, 1000)
    // 显示验证码弹框
    showTop.value = true
    // codeb.value = true
    // console.log(codeb.value, '111')
  }
}
// 密码登录
const Busername = localStorage.getItem('username')
const Bpwd = localStorage.getItem('pwd')
const Tlogin = () => {
  if (Bpwd == pwd.value || Busername == username.value) {
    // alert('登陆成功')
    showY.value = true
    setTimeout(() => {
      // router.push('/setp')
      // router.push('/home')
      router.push('/guide')
    }, 1000)
  } else {
    showToast('手机号或密码错误');
  }
}
// 监听确认框状态
const inpbtn = ref(false)
// 点击确认框
const yes = () => {
  inpbtn.value = true
  console.log(inpbtn.value)
}
// 拒绝按钮
const jjbtn = () => {
  show.value = false
}
// 同意按钮
const tybtn = () => {
  inpbtn.value = true;
  show.value = false
}
// 显示弹框
const show = ref(false);
// 验证码弹框
const showTop = ref(false)
const onClickLeft = () => history.back();
</script>
<style scoped>
.img {
  width: 100%;
  /* height: 360px; */
  margin-top: -60px;
  /* margin-bottom: 20px; */
}

.img>img {
  width: 60%;
  margin-left: 20%;
}

.inp {
  margin-top: -100px;
}

.place {
  width: 60%;
  height: 50px;
  font-size: 30px;
  margin-left: 20%;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  background-color: #000;
  color: #fff;
}

.inp>p>input {
  width: 80%;
  height: 100px;
  position: relative;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-left: 10%;
  margin-top: 40px;
}

.phone {
  position: absolute;
  z-index: 999;
  margin-top: 70px;
  margin-left: 100px;
  font-size: 30px;
}

.btnyzm {
  width: 200px;
  height: 60px;
  color: #fff;
  background-color: #0070FF;
  border: none;
  position: absolute;
  right: 100px;
  margin-top: 60px;
  border-radius: 30px;
}

.ifyzm {
  width: 360px;
  height: 60px;
  margin-left: 60px;
  border-radius: 30px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  /* background-color: blue; */
  background-color: #ccc;
  position: absolute;
  right: 80px;
  margin-top: -80px;
  border: none;
  font-size: 30px;
}

.elyzm {
  width: 200px;
  height: 60px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  border-radius: 30px;
  position: absolute;
  right: 80px;
  margin-top: -80px;
  background-color: #0070FF;
  border: none;
  font-size: 28px;
}

.inp1 {
  padding-left: 140px;
  font-size: 30px;
}

.inp2 {
  padding-left: 40px;
  font-size: 30px;
}

.btnlogin {
  width: 80%;
  height: 100px;
  background-color: #ccc;
  border: none;
  border-radius: 50px;
  margin-left: 10%;
  margin-top: 80px;
  color: #9d9b9b;
  font-weight: 600;
  font-size: 38px;
}

.btnlogin2 {
  width: 80%;
  height: 100px;
  background-color: #0070FF;
  border: none;
  border-radius: 50px;
  margin-left: 10%;
  margin-top: 80px;
  color: #fff;
  font-weight: 600;
  font-size: 38px;
}

.inpbtn {
  width: 80%;
  height: 100%;
  margin-left: 10%;
  margin-top: -40px;
}

.checkbox {
  width: 100%;
  height: 200px;
  float: left;
  position: relative;
  font-size: 26px;
}

.yi {
  position: absolute;
  margin-top: -20px;
}

a {
  color: #0085F3;
}

.pop {
  width: 80%;
  height: 320px;
  border-radius: 20px;
  text-align: center;
}

.pop>p {
  width: 86%;
  margin-left: 7%;
  font-size: 28px;
  margin-top: 40px;
}

.jj {
  width: 47%;
  height: 70px;
  margin-right: 6%;
  border-radius: 16px;
  border: 1px solid #ccc;
  background-color: #fff;
}

.ty {
  width: 47%;
  height: 70px;
  border-radius: 16px;
  border: none;
  color: #fff;
  background-color: #0070FF;
}

.popcode {
  width: 100%;
  height: 10%;
  border-radius: 20px;
  font-size: 30px;
}

.popcode>p {
  margin-left: 40px;
  margin-top: 6%;
}

.pup {
  width: 800px;
  height: 100%;
}

.pup>img {
  width: 200px;
  height: 140px;
  margin-left: 34%;
  margin-top: 100px;
}

.pup>p {
  margin-left: 44%;
  margin-top: 200px;
}

.nozh {
  font-size: 30px;
  position: fixed;
  right: 10%;
  margin-top: 1%;
}

.tologon {
  color: #0070FF;
}

.tab2 {
  margin-top: -100px;
}

.Tphone {
  font-size: 30px;
}

.Tpwd {
  font-size: 30px;
}

.tab2>p>input {
  width: 80%;
  height: 100px;
  position: relative;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-left: 10%;
  margin-top: 40px;
}

.Tbtnlogin {
  width: 80%;
  height: 100px;
  background-color: #ccc;
  border: none;
  border-radius: 50px;
  margin-left: 10%;
  margin-top: 80px;
  color: #9d9b9b;
  font-weight: 600;
  font-size: 38px;
}

.Tbtnlogin2 {
  width: 80%;
  height: 100px;
  background-color: #0070FF;
  border: none;
  border-radius: 50px;
  margin-left: 10%;
  margin-top: 80px;
  color: #fff;
  font-weight: 600;
  font-size: 38px;
}
.blue{
  color: #0070FF;
}
</style>
